<ion-view title="设置">
    <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon-round"></button>
    </ion-nav-buttons>
    <ion-content class="has-header">
        <div class="list card">
            <a class="item item-icon-left">
                <i class="icon ion-ios7-alarm-outline"></i> 提醒设置
            </a>
            <a class="item item-icon-left item-icon-right" ng-click="showBgcolor=!showBgcolor" ng-show='showBgcolor'>
                <i class="icon ion-settings"></i> 主题设置 <i class="icon ion-ios7-arrow-up" ng-show='showBgcolor'></i>
            </a>
            <a class="item item-icon-left item-icon-right" ng-click="showBgcolor=!showBgcolor" ng-show='!showBgcolor'>
                <i class="icon ion-settings"></i> 主题设置 <i class="icon ion-ios7-arrow-down" ng-show='!showBgcolor'></i>
            </a>

            <div class="item item-text-wrap" ng-show='showBgcolor'>
                <div class="row">
                    <div class="col">
                        <button class="button button-positive" ng-click="setBgcolor(1)">
                    </div>
                    <div class="col">
                        <button class="button button-calm" ng-click="setBgcolor(2)">
                    </div>
                    <div class="col">
                        <button class="button button-balanced" ng-click="setBgcolor(3)">
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <button class="button button-energized" ng-click="setBgcolor(4)">
                    </div>
                    <div class="col">
                        <button class="button button-assertive" ng-click="setBgcolor(5)">
                    </div>
                    <div class="col">
                        <button class="button button-royal" ng-click="setBgcolor(6)">
                    </div>
                </div>
            </div>
            <a class="item item-icon-left">
                <i class="icon ion-share"></i> 分享给好友
            </a>
            <a class="item item-icon-left">
                <i class="icon ion-loop"></i> 检查新版本
            </a>
            <a class="item item-icon-left item-icon-right" ng-click="showAbout=!showAbout" ng-show='showAbout'>
                <i class="icon ion-help"></i> 关于 <i class="icon ion-ios7-arrow-up" ng-show='showAbout'></i>
            </a>
            <a class="item item-icon-left item-icon-right" ng-click="showAbout=!showAbout" ng-show='!showAbout'>
                <i class="icon ion-help"></i> 关于 <i class="icon ion-ios7-arrow-down" ng-show='!showAbout'></i>
            </a>

            <div class="item item-text-wrap" ng-show='showAbout'>
                <pre>Ionic是一个前端的框架,帮助开发者使用HTML5, CSS3和JavaScript做出原生应用。有了它,开发者可以使用HTML5做出原生应用的感觉。</pre>
            </div>
        </div>
    </ion-content>
</ion-view>